/* 样式入口文件 - 统一导入所有样式 */

/* 导入组件样式 */
@import './components/buttons.css';
@import './components/forms.css';
@import './components/tables.css';
@import './components/modals.css';

/* 导入布局样式 */
@import './layout/container.css';

/* 导入工具类样式 */
@import './utilities/spacing.css';
@import './utilities/typography.css';
@import './utilities/display.css';

/* ============================================
   全局 CSS 变量 - 统一配色系统
   ============================================ */
:root {
  /* 主色调 - 活力蓝色系 */
  --color-primary: #00b4ff;
  --color-primary-light: #5ce1ff;
  --color-primary-lighter: #90e0ff;
  --color-primary-dark: #0088cc;
  
  /* 辅助色 - 活力绿色系 */
  --color-secondary: #a0e25f;
  --color-secondary-light: #c2f7a0;
  --color-secondary-lighter: #d4ff8c;
  
  /* 强调色 - 更鲜艳 */
  --color-accent-yellow: #ffeb3b;
  --color-accent-orange: #ff9800;
  --color-accent-pink: #ff4081;
  --color-accent-purple: #e040fb;
  
  /* 背景色 - 稍微亮一些 */
  --bg-primary: #2f3136;
  --bg-secondary: #424549;
  --bg-tertiary: #1e2124;
  --bg-card: #424549;
  --bg-hover: #525557;
  
  /* 代码块背景 - 更鲜艳的底色 */
  --bg-code-inline: linear-gradient(135deg, #3d2f5f 0%, #2a1f3d 100%);
  --bg-code-block: linear-gradient(135deg, #1f2937 0%, #1a2332 100%);
  
  /* 文字颜色 - 更明亮 */
  --text-primary: #f0f0f0;
  --text-secondary: #e0e0e0;
  --text-tertiary: #b8b8b8;
  --text-white: #ffffff;
  --text-muted: #999999;
  --text-black: #000000;
  
  /* 边框颜色 - 稍微亮一些 */
  --border-primary: #636366;
  --border-secondary: #4a4a4e;
  --border-light: #545458;
  
  /* 状态颜色 - 更鲜艳 */
  --color-success: #a0e25f;
  --color-warning: #ffeb3b;
  --color-error: #ff4081;
  --color-info: #5ce1ff;
  
  /* 渐变色 - 更鲜艳活力 */
  --gradient-primary: linear-gradient(135deg, #5ce1ff 0%, #00b4ff 100%);
  --gradient-secondary: linear-gradient(135deg, #a0e25f 0%, #5ce1ff 100%);
  --gradient-rainbow: linear-gradient(135deg, #5ce1ff 0%, #00b4ff 40%, #a0e25f 80%, #ffeb3b 100%);
  --gradient-warm: linear-gradient(135deg, #ff9800 0%, #ffeb3b 50%, #a0e25f 100%);
  --gradient-cool: linear-gradient(135deg, #e040fb 0%, #5ce1ff 100%);
  
  /* 深色渐变 - 用于亮色背景 */
  --gradient-primary-dark: linear-gradient(135deg, #0088cc 0%, #0056a6 100%);
  --gradient-secondary-dark: linear-gradient(135deg, #6b9a3e 0%, #0088cc 100%);
  --gradient-rainbow-dark: linear-gradient(135deg, #0088cc 0%, #0056a6 40%, #6b9a3e 70%, #e6a700 100%);
  --gradient-vibrant: linear-gradient(135deg, #ff4081 0%, #e040fb 30%, #00b4ff 60%, #a0e25f 100%);
  
  /* 阴影 - 更强的发光效果 */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.4);
  --shadow-glow-blue: 0 4px 20px rgba(92, 225, 255, 0.5);
  --shadow-glow-green: 0 4px 20px rgba(160, 226, 95, 0.5);
  --shadow-glow-pink: 0 4px 20px rgba(255, 64, 129, 0.5);
  --shadow-glow-yellow: 0 4px 20px rgba(255, 235, 59, 0.5);
  --shadow-glow-rainbow: 0 4px 25px rgba(92, 225, 255, 0.3), 0 8px 35px rgba(160, 226, 95, 0.2);
  
  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 50%;
  
  /* 间距 */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  
  /* 过渡 */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ============================================
   全局字体和基础样式统一
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(135deg,
    #1a1a2e 0%,     /* 深蓝黑 */
    #16213e 25%,    /* 深蓝 */
    #0f3460 50%,    /* 中蓝 */
    #533483 75%,    /* 茄子紫 */
    #7209b7 100%);  /* 亮紫 */
  background-size: 400% 400%;
  animation: gradientShift 25s ease-in-out infinite;
  min-height: 100vh;
}

/* 背景渐变动画 */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 25% 25%;
  }
  50% {
    background-position: 50% 0%;
  }
  75% {
    background-position: 75% 75%;
  }
  100% {
    background-position: 100% 50%;
  }
}



/* 统一标题样式 */
h1, h2, h3, h4, h5, h6 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 统一段落样式 */
p {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

/* 统一按钮样式 */
button {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
}

/* 统一输入框样式 */
input, textarea, select {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================
   Element Plus 暗色模式 CSS 变量覆盖
   参考: https://element-plus.org/en-US/guide/dark-mode
   ============================================ */
html.dark {
  /* 基础颜色变量 - 根据官方文档建议 */
  --el-bg-color: var(--bg-card);
  --el-bg-color-page: var(--bg-primary);
  --el-bg-color-overlay: var(--bg-card);
  --el-text-color-primary: var(--text-primary);
  --el-text-color-regular: var(--text-secondary);
  --el-text-color-secondary: var(--text-tertiary);
  --el-text-color-placeholder: var(--text-muted);
  --el-text-color-disabled: var(--text-muted);
  --el-border-color: var(--border-primary);
  --el-border-color-light: var(--border-secondary);
  --el-border-color-lighter: var(--border-light);
  --el-border-color-extra-light: var(--border-light);
  --el-fill-color: var(--bg-secondary);
  --el-fill-color-light: var(--bg-hover);
  --el-fill-color-lighter: var(--bg-tertiary);
  --el-fill-color-extra-light: var(--bg-tertiary);
  --el-fill-color-blank: transparent;
  
  /* 表格相关变量 */
  --el-table-border-color: var(--border-primary);
  --el-table-border: 1px solid var(--border-primary);
  --el-table-bg-color: var(--bg-card);
  --el-table-tr-bg-color: var(--bg-card);
  --el-table-expanded-cell-bg-color: var(--bg-secondary);
  --el-table-header-bg-color: var(--bg-secondary);
  --el-table-header-text-color: var(--text-primary);
  --el-table-row-hover-bg-color: var(--bg-hover);
  --el-table-current-row-bg-color: var(--bg-hover);
  --el-table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
  
  /* 分页相关变量 */
  --el-pagination-bg-color: var(--bg-card);
  --el-pagination-text-color: var(--text-primary);
  --el-pagination-button-bg-color: var(--bg-card);
  --el-pagination-button-disabled-bg-color: var(--bg-tertiary);
  --el-pagination-button-disabled-text-color: var(--text-muted);
  --el-pagination-hover-color: var(--color-primary);
  
  /* 标签相关变量 */
  --el-tag-bg-color: var(--bg-secondary);
  --el-tag-border-color: var(--border-primary);
  --el-tag-text-color: var(--text-primary);
  --el-tag-success-bg-color: rgba(160, 226, 95, 0.2);
  --el-tag-success-border-color: var(--color-success);
  --el-tag-success-text-color: var(--color-success);
  --el-tag-warning-bg-color: rgba(255, 235, 59, 0.2);
  --el-tag-warning-border-color: var(--color-warning);
  --el-tag-warning-text-color: var(--color-warning);
  --el-tag-danger-bg-color: rgba(255, 64, 129, 0.2);
  --el-tag-danger-border-color: var(--color-danger);
  --el-tag-danger-text-color: var(--color-danger);
  --el-tag-info-bg-color: rgba(0, 180, 255, 0.2);
  --el-tag-info-border-color: var(--color-primary);
  --el-tag-info-text-color: var(--color-primary);
  
  /* 按钮相关变量 */
  --el-button-text-color: var(--color-primary);
  --el-button-hover-text-color: var(--color-primary-light);
  --el-button-hover-bg-color: rgba(0, 180, 255, 0.1);
  --el-button-disabled-text-color: var(--text-muted);
  --el-button-disabled-bg-color: var(--bg-tertiary);
  --el-button-disabled-border-color: var(--border-secondary);
  
  /* 对话框相关变量 */
  --el-dialog-bg-color: var(--bg-card);
  --el-dialog-border-color: var(--border-primary);
  --el-dialog-header-bg-color: var(--bg-secondary);
  --el-dialog-title-text-color: var(--text-primary);
  --el-dialog-content-text-color: var(--text-primary);
  --el-dialog-footer-bg-color: var(--bg-card);
  
  /* 卡片相关变量 */
  --el-card-bg-color: var(--bg-card);
  --el-card-border-color: var(--border-primary);
  --el-card-header-bg-color: var(--bg-secondary);
  --el-card-text-color: var(--text-primary);
  
  /* 加载遮罩相关变量 */
  --el-loading-mask-color: rgba(47, 49, 54, 0.8);
  
  /* 空状态相关变量 */
  --el-empty-text-color: var(--text-tertiary);
  --el-empty-description-color: var(--text-muted);
  
  /* 输入框相关变量 */
  --el-input-bg-color: var(--bg-card);
  --el-input-text-color: var(--text-primary);
  --el-input-border-color: var(--border-primary);
  --el-input-hover-border-color: var(--color-primary);
  --el-input-focus-border-color: var(--color-primary);
  --el-input-disabled-bg-color: var(--bg-tertiary);
  --el-input-disabled-text-color: var(--text-muted);
  --el-input-disabled-border-color: var(--border-secondary);
  --el-input-placeholder-color: var(--text-muted);
  
  /* 选择器相关变量 */
  --el-select-bg-color: var(--bg-card);
  --el-select-text-color: var(--text-primary);
  --el-select-border-color: var(--border-primary);
  --el-select-hover-border-color: var(--color-primary);
  --el-select-focus-border-color: var(--color-primary);
  --el-select-disabled-bg-color: var(--bg-tertiary);
  --el-select-disabled-text-color: var(--text-muted);
  --el-select-disabled-border-color: var(--border-secondary);
  
  /* 下拉菜单相关变量 */
  --el-dropdown-menu-bg-color: var(--bg-card);
  --el-dropdown-menu-text-color: var(--text-primary);
  --el-dropdown-menu-border-color: var(--border-primary);
  --el-dropdown-menu-item-hover-bg-color: var(--bg-hover);
  --el-dropdown-menu-item-hover-text-color: var(--text-primary);
}

/* ============================================
   Element Plus 毛玻璃效果增强
   ============================================ */
html.dark {
  /* 表格毛玻璃效果 */
  --el-table-bg-color: rgba(66, 69, 73, 0.8);
  --el-table-header-bg-color: rgba(47, 49, 54, 0.9);
  --el-table-tr-bg-color: rgba(66, 69, 73, 0.8);
  --el-table-expanded-cell-bg-color: rgba(47, 49, 54, 0.9);
  
  /* 卡片毛玻璃效果 */
  --el-card-bg-color: rgba(66, 69, 73, 0.8);
  --el-card-header-bg-color: rgba(47, 49, 54, 0.9);
  
  /* 对话框毛玻璃效果 */
  --el-dialog-bg-color: rgba(66, 69, 73, 0.9);
  --el-dialog-header-bg-color: rgba(47, 49, 54, 0.95);
  --el-dialog-footer-bg-color: rgba(66, 69, 73, 0.9);
  
  /* 下拉菜单毛玻璃效果 */
  --el-dropdown-menu-bg-color: rgba(66, 69, 73, 0.9);
  
  /* 选择器下拉框毛玻璃效果 */
  --el-select-dropdown-bg-color: rgba(66, 69, 73, 0.9);
  
  /* 输入框毛玻璃效果 */
  --el-input-bg-color: rgba(66, 69, 73, 0.6);
  
  /* 分页毛玻璃效果 */
  --el-pagination-bg-color: rgba(66, 69, 73, 0.8);
  --el-pagination-button-bg-color: rgba(66, 69, 73, 0.8);
}

/* 为Element Plus组件添加毛玻璃效果 */
html.dark .el-table {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(66, 69, 73, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #f0f0f0;
}

html.dark .el-table__header-wrapper {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(47, 49, 54, 0.9) !important;
}

html.dark .el-table__header th {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

html.dark .el-table__body tr {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(66, 69, 73, 0.8) !important;
}

html.dark .el-table__body td {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #e8e8e8;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  padding: 12px 8px;
}

html.dark .el-table__body tr:hover {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  background: rgba(82, 85, 87, 0.9) !important;
}

html.dark .el-table__body tr:hover td {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

html.dark .el-table__body tr.el-table__row--striped {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.02) !important;
}

html.dark .el-card {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(66, 69, 73, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

html.dark .el-card__header {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(47, 49, 54, 0.9) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark .el-dialog {
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  background: rgba(66, 69, 73, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

html.dark .el-dialog__header {
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  background: rgba(47, 49, 54, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark .el-dialog__footer {
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  background: rgba(66, 69, 73, 0.9) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark .el-dropdown-menu {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(66, 69, 73, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

html.dark .el-select-dropdown {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(66, 69, 73, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

html.dark .el-input__inner {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(66, 69, 73, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark .el-input__inner:focus {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  background: rgba(66, 69, 73, 0.8) !important;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 180, 255, 0.2);
}

html.dark .el-textarea__inner {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(66, 69, 73, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark .el-textarea__inner:focus {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  background: rgba(66, 69, 73, 0.8) !important;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 180, 255, 0.2);
}

html.dark .el-pagination {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html.dark .el-pagination .el-pager li {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(66, 69, 73, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark .el-pagination .el-pager li:hover {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  background: rgba(82, 85, 87, 0.9) !important;
}

html.dark .el-pagination .btn-prev,
html.dark .el-pagination .btn-next {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(66, 69, 73, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark .el-pagination .btn-prev:hover,
html.dark .el-pagination .btn-next:hover {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  background: rgba(82, 85, 87, 0.9) !important;
}

/* 标签毛玻璃效果 */
html.dark .el-tag {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(82, 85, 87, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

html.dark .el-tag--success {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(160, 226, 95, 0.2) !important;
  border: 1px solid rgba(160, 226, 95, 0.3);
}

html.dark .el-tag--warning {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 235, 59, 0.2) !important;
  border: 1px solid rgba(255, 235, 59, 0.3);
}

html.dark .el-tag--danger {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 64, 129, 0.2) !important;
  border: 1px solid rgba(255, 64, 129, 0.3);
}

html.dark .el-tag--info {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(0, 180, 255, 0.2) !important;
  border: 1px solid rgba(0, 180, 255, 0.3);
}

/* 按钮毛玻璃效果 */
html.dark .el-button--text,
html.dark .el-button--link {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

html.dark .el-button--text:hover,
html.dark .el-button--link:hover {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(0, 180, 255, 0.1) !important;
}

/* 加载遮罩毛玻璃效果 */
html.dark .el-loading-mask {
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  background: rgba(47, 49, 54, 0.8) !important;
}

/* 空状态毛玻璃效果 */
html.dark .el-empty {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ============================================
   Element Plus Drawer 全局样式覆盖
   ============================================ */
.el-drawer {
  background: linear-gradient(135deg, #424549 0%, #2f3136 100%) !important;
}

.el-drawer__header {
  background: transparent !important;
  margin-bottom: 0 !important;
}
.el-drawer__close-btn {
  color: #ffffff !important;
  font-size: 1rem !important;
}

.el-drawer__body {
  background: transparent !important;
  padding: 0 !important;
}

/* Font Awesome 图标通用样式 */
.fas, .far, .fab {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

/* 按钮中的图标样式 */
.btn i {
  margin-right: 0.5rem;
}

.btn i:last-child {
  margin-right: 0;
  margin-left: 0.5rem;
}

.btn i:only-child {
  margin: 0;
}

/* Container 通用规则 - 确保所有子元素不超出范围 */
.container > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.container table {
  max-width: 100% !important;
  table-layout: fixed !important;
}

.container img {
  max-width: 100% !important;
  height: auto !important;
}

.container pre,
.container code {
  max-width: 100% !important;
  overflow-x: auto !important;
  word-wrap: break-word !important;
}

/* 重置样式 */
* {
  box-sizing: border-box;
}

/* body样式已在上面定义，这里删除重复定义 */

/* 基础样式 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
}

p {
  margin: 0 0 1rem 0;
}

a {
  color: var(--color-primary-light);
  text-decoration: none;
  transition: color var(--transition-normal);
}

a:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

/* 表单重置 */
input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  cursor: pointer;
}

/* 工具类 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 全局动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 动画工具类 */
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
.animate-slide-in-up { animation: slideInUp 0.3s ease-out; }
.animate-slide-in-down { animation: slideInDown 0.3s ease-out; }
.animate-slide-in-left { animation: slideInLeft 0.3s ease-out; }
.animate-slide-in-right { animation: slideInRight 0.3s ease-out; }
.animate-scale-in { animation: scaleIn 0.3s ease-out; }

/* 过渡工具类 */
.transition-all { transition: all 0.3s ease; }
.transition-colors { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }
.transition-opacity { transition: opacity 0.3s ease; }
.transition-transform { transition: transform 0.3s ease; }

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-light);
}

/* 选择文本样式 */
::selection {
  background-color: var(--color-primary-dark);
  color: var(--text-white);
}

::-moz-selection {
  background-color: var(--color-primary-dark);
  color: var(--text-white);
}

/* 焦点样式 */
:focus {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================
   实用工具类 - 基于 CSS 变量
   ============================================ */

/* 文字颜色工具类 */
.text-primary { color: var(--color-primary) !important; }
.text-primary-light { color: var(--color-primary-light) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-white { color: var(--text-white) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-error { color: var(--color-error) !important; }
.text-orange { color: var(--color-accent-orange) !important; }
.text-purple { color: var(--color-accent-purple) !important; }

/* 背景色工具类 */
.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-card { background-color: var(--bg-card) !important; }

/* 渐变背景工具类 */
.bg-gradient-primary { background: var(--gradient-primary) !important; }
.bg-gradient-secondary { background: var(--gradient-secondary) !important; }
.bg-gradient-rainbow { background: var(--gradient-rainbow) !important; }
.bg-gradient-warm { background: var(--gradient-warm) !important; }
.bg-gradient-cool { background: var(--gradient-cool) !important; }

/* 边框工具类 */
.border-primary { border: 1px solid var(--border-primary) !important; }
.border-secondary { border: 1px solid var(--border-secondary) !important; }

/* 阴影工具类 */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-glow-blue { box-shadow: var(--shadow-glow-blue) !important; }
.shadow-glow-green { box-shadow: var(--shadow-glow-green) !important; }
.shadow-glow-yellow { box-shadow: var(--shadow-glow-yellow) !important; }
.shadow-glow-pink { box-shadow: var(--shadow-glow-pink) !important; }
.shadow-glow-rainbow { box-shadow: var(--shadow-glow-rainbow) !important; }

/* 圆角工具类 */
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* 渐变文字效果 */
.text-gradient-primary {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-rainbow {
  background: var(--gradient-rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-warm {
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-cool {
  background: var(--gradient-cool);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 发光效果 - 更强烈 */
.glow-blue {
  text-shadow: 0 0 20px rgba(92, 225, 255, 0.8), 0 0 40px rgba(92, 225, 255, 0.4);
}

.glow-green {
  text-shadow: 0 0 20px rgba(160, 226, 95, 0.8), 0 0 40px rgba(160, 226, 95, 0.4);
}

.glow-yellow {
  text-shadow: 0 0 20px rgba(255, 235, 59, 0.8), 0 0 40px rgba(255, 235, 59, 0.4);
}

.glow-pink {
  text-shadow: 0 0 20px rgba(255, 64, 129, 0.8), 0 0 40px rgba(255, 64, 129, 0.4);
}

.glow-rainbow {
  text-shadow: 
    0 0 10px rgba(92, 225, 255, 0.8),
    0 0 20px rgba(160, 226, 95, 0.6),
    0 0 30px rgba(255, 235, 59, 0.4);
}

/* 打印样式 */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a, a:visited {
    text-decoration: underline;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  
  .no-print {
    display: none !important;
  }
}
